<template>
	<div style="margin-top: 60px;">
		<mt-header style="color: #000000;background: white;">
			<router-link to="/" slot="left">
				<mt-button icon="back">返回</mt-button>
			</router-link>
		</mt-header>
		<div class="container">
			<h3>输入手机号:</h3>
			<p><input id="inputname" type="text" class="form-control" v-model="phone"></p>{{errors}}
			<h3>输入密码:</h3>
			<p><input id="inputnum" type="password" class="form-control" v-model="psd" @click="validatePhone()"></p>
			<button class="btn btn-success" type="button" @click="createNew()" style="float: right;">注册</button>
		</div>

	</div>

</template>

<script>
	import {
		Toast
	} from 'mint-ui';
	export default {
		name: 'Register',
		data() {
			return {
				errors: '',
				phone: '',
				psd: '',
			}
		},
		methods: {
			validatePhone() {
				if (!this.phone) {
					this.errors = '手机号码不能为空'
				} else if (!/^1[345678]\d{9}$/.test(this.phone)) {
					this.errors = '请输入正确手机号'
				} else {
					this.errors = ''
					return true
				}
			},
			createNew() {
				var phoneValue = this.phone;
				var pwsdValue = this.psd;
				if (this.validatePhone()) {
					var obj = {
						userphone: phoneValue,
						userpwsd: pwsdValue,
						logged:true
					}
					this.$router.push({
						name: 'login',
					});
					window.localStorage.setItem('key', JSON.stringify(obj));
					Toast('注册成功');
				}else{
					Toast('手机号不合法')
				}
			}
		},
	}
</script>

<style scoped>
</style>
